<template>
  <div class="pricing-container">
    <div class="title text-3xl py-10 font-medium">产品定价</div>

    <div class="card-group">
      <div v-for="(item, index) in pricingOptions" :key="index" class="card-item">
        <el-card :style="{ maxWidth: '480px' }" shadow="hover">
          <template #header>{{ item.productName }}</template>
<!--          <img :src="item.image" :alt="item.title"/>-->
          <img src="@/assets/img/dall.png">
          <el-text class="mx-1">{{item.skuName}}</el-text>
          <br>
          <el-text class="mx-1">{{item.price}} ¥</el-text>
          <div class="payment-buttons mt-4">
            <el-button type="primary" round @click="handlePayment('aliPay', item.code)" class="payment-btn">支付宝</el-button>
            <el-button type="success" round @click="handlePayment('wxPay', item.code)" class="payment-btn">微信</el-button>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 收款码 -->
    <el-dialog
        v-model="centerDialogVisible"
        width="550"
        center
    >
      <!-- 二维码生成区域 -->
      <div id="qrcode" class="qrcode-container"></div>

      <!-- 图片下方的动态提示文字 -->
      <div class="payment-info text-center">请使用 <el-text :type="selectedPaymentMethod === 'aliPay' ? 'primary' : 'success'">{{ selectedPaymentMethod }}</el-text> 扫码</div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button :type="selectedPaymentMethod === 'aliPay' ? 'primary' : 'success'" @click="havePayed">已支付</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>

import {useRouter} from "vue-router";
import {ref, onMounted, nextTick} from 'vue';
import Qrcode from 'qrcodejs2-fix';

import { goodsList } from '@/api/goods';

const router = useRouter();

// 控制对话框显示状态
const centerDialogVisible = ref(false);

// 存储选中的支付方式
const selectedPaymentMethod = ref('');

// 存储从接口获取的商品定价选项
const pricingOptions = ref([]);

// 获取商品列表并设置为 pricingOptions
onMounted(async () => {
  try {
    const response = await goodsList();
    pricingOptions.value = response.data; // 假设接口返回的数据格式为 response.data
  } catch (error) {
    console.error("Error fetching goods list:", error);
  }
});

// 处理支付按钮点击事件
function handlePayment(paymentMethod, type) {
  const token = localStorage.getItem('aiToken');
  if (!token) {
    ElMessage({
      message: '您还未登录，请先登录！',
      type: 'error',
      plain: true,
    });
    router.push('/login'); // 重定向到登录页面
  } else {
    // 设置选中的支付方式
    selectedPaymentMethod.value = paymentMethod;

    // 打开对话框并生成二维码
    centerDialogVisible.value = true;

    nextTick(() => {
      generateQRCode(paymentMethod, type);
    });
  }
}

function havePayed() {
  centerDialogVisible.value = false
  ElMessage({
    message: 'Are you sure！',
    type: 'success',
    plain: true,
  })
}

// 生成二维码的方法
function generateQRCode(paymentMethod, type) {
  // 清空之前的二维码（防止重复生成）
  const qrCodeElement = document.getElementById("qrcode");
  qrCodeElement.innerHTML = '';

  // 模拟获取支付二维码 URL（实际应用中应该调用后端 API 获取）
  const qrCodeUrl = generateQRCodeUrl(paymentMethod, type);

  // 生成二维码
  new Qrcode(qrCodeElement, {
    width: 400,
    height: 400,
    text: qrCodeUrl,
  });
}

// 生成二维码 URL 的逻辑
function generateQRCodeUrl(paymentMethod, type) {
  // 根据支付方式和商品类型生成不同的二维码 URL
  const baseURL = "https://www.example.com/pay";
  return Math.random().toString(36).slice(-6);
}

</script>

<style scoped lang="scss">
.pricing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;

  .title {
    text-align: center;
  }

  .card-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;

    .card-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        width: 100%;
      }

      .payment-buttons {
        display: flex;
        justify-content: space-around;
        width: 100%;

        .payment-btn {
          flex: 1;
          margin: 0 5px;
        }
      }
    }
  }
}

.payment-btn {
  margin: 0 5px;
}

.qrcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
}

.payment-info {
  margin-top: 16px;
  font-weight: bold;
}

</style>
